import a from './img/1.jpeg';
import b from './img/2.jpeg';
import c from './img/3.jpeg';
let src = [a, b, c];
//面向对象
function Light(box) {
    this.box = document.querySelector(box);
    this.index = 1;
    //初始化图片
    this.init = function (click = '') {
        this.img = new Image();
        this.img.draggable = false;
        this.img.src = src[this.index - 1];
        this.box.appendChild(this.img);
        //默认不触发点击
        if (click) this.bindClick(); //初始化完成后立即绑定点击事件
    };
}
//绑定点击事件
Light.prototype.bindClick = function () {
    this.img.addEventListener('click', () => {
        this.down();
        this.img.src = src[this.index - 1];
    });
};
Light.prototype.down = function () {
    this.index++;
    if (this.index > 3) this.index = 1;
};
//自动播放
let f = true; //默认向下
Light.prototype.auto = function (direction) {
    Light.prototype.timer = setInterval(() => {
        if (direction == 'down') this.down();
        if (direction == 'reverse') {
            if (f) this.index++;
            if (!f) this.index--;
            if (this.index == 3) f = false;
            if (this.index == 1) f = true;
        }
        this.img.src = src[this.index - 1];
    }, 1000);
    document.addEventListener('visibilitychange', () => {
        //界面不显示时不轮播
        if (document.hidden) clearInterval(this.timer); //判断网页是否被隐藏
        else {
            clearInterval(this.timer); //防止定时器叠加,鼠标移出也会触发定时器
        }
    });
};
//移入
Light.prototype.enter = function () {
    this.img.addEventListener('mouseenter', () => clearInterval(this.timer));
};
//移出
Light.prototype.leave = function (direction) {
    this.img.addEventListener('mouseleave', () => this.auto(direction));
};
//上到下
let l1 = new Light('.box1');
l1.init(1);
//自动上到下，鼠标移入停止播放，移出继续播放
let l2 = new Light('.box2');
l2.init();
l2.enter();
l2.auto('down');
l2.leave('down');
//自动往复播放，先上到下，鼠标移入停止播放，移出继续播放
let l3 = new Light('.box3');
l3.init();
l3.enter();
l3.auto('reverse');
l3.leave('reverse');
